<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡券效果</title>
		<style>
			body{
				background-color: gainsboro;
			}
			.coupon{
				width: 300px;
				height: 100px;
				line-height: 100px;
				margin: 50px auto;
				text-align: center;
				position: relative;
				background: radial-gradient(circle at right bottom, transparent 10px, #fff 0) top right / 50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #fff 0) top left/50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #fff 0) bottom right/50% 51px no-repeat,radial-gradient(circle at left top, transparent 10px, #fff 0) bottom left/50% 51px no-repeat;
				filter: drop-shadow(2px 2px 2px red);
			}
			.coupon span{
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
				color: red;
				font-size: 50px;
				font-weight: 400;
			}
		</style>
	</head>
	<body>
		<div class="coupon"></div>
		<div class="coupon"></div>
		<div class="coupon"></div>
	</body>
</html>